<template>
	<view>
			<view>
				<view class="swiper-content pos-rel bg-fff">
					<u-swiper :list="bannerList" height="750" :autoplay="false"
						@change="bannerChange" @click="previewImage"></u-swiper>
					<view class="banner-title">{{bannerIndex}}/{{bannerList.length}}</view>
				</view>

				<view class="bg-fff p10 bb">
					<view class="dis-flex flex-align-center flex-between">
						<text class="c-red fs18 fwb">{{detailItem.scoreprice}}积分</text>
						<view class="fs14 c-333">库存{{detailItem.stock}}</view>
					</view>
					<view class="mt10 dis-flex flex-align-center">
						<view class="flex fs18 fw600 ellipsis-2 breakall c-333">{{detailItem.name}}</view>
					</view>
				</view>
				
				<!-- <view class="px15 py10 bg-fff mt10 dis-flex flex-align-center flex-between">
					<text class="fwb fs16">兑换数量</text>
					<view class="fr fs15">
						<u-number-box buttonSize="80rpx" inputWidth="100rpx" min="1" step="1" :max="detailItem.stock || 1"  v-model="buyNum"></u-number-box>
					</view> 
				</view> -->
				
				<view class="center c-888 fs14 p10">—— 商品详情 ——</view>
				
				<view>
					<view class="px10 breakall">
						<u-parse :content="detailItem.body" :previewImg="false" :tagStyle="{'img':'border:none;width:100%;height:auto;display:block;margin-top: -0.5rpx;'}"></u-parse>
					</view>
				</view>
				<view style="height: 120rpx;width: 100%;"></view>
			</view>

			<view class="btn-submit-box">
				<button class="btn-submit bg-common c-fff" @tap="openSkupopup">立即兑换</button>
			</view>
		
		<!-- sku弹框 -->
		<th-sku-popup @complete="selectSkuDone" v-model="showSkuPopup"  :params="params"></th-sku-popup>
			
			
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop" bottom="200" right="30" :iconStyle="backTopStyle" :customStyle="backTopCustomStyle"></u-back-top>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo', 'refreshOrder'])
		},
		data() {
			return {
				id: '',
				detailItem: {},
				bannerList:[],
				bannerIndex: 1, 
				backTopStyle: {
					color: '#FFFFFF'
				},
				backTopCustomStyle: {
					backgroundColor:'#999'
				},
				scrollTop: 0,
				buyNum:1,
				
				showSkuPopup: false,
				params:{}
			}
		},

		watch: {
			hasLogin(val, old) {
				if (val) {
					this.getProductDetail();
				}
			},

		},

		onLoad(option) {
			this.id = option.id || '';
			// 获取商品详情
			this.getProductDetail();
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		methods: {
			bannerChange(index) {
				this.bannerIndex = index.current + 1;
			},

			// 获取商品详情
			getProductDetail() {
				this.$http.get(this.$config.UrlProductDetail, {
					id: this.id
				}, {
					log: true
				}).then((res) => {
					if (res.code == 1) {
						this.detailItem = res.data || {};
						this.bannerList.push(this.$store.state.host + this.detailItem.thumb);
					}else thsi.$api.toast(res.msg);
				})
			},
			
			/**
			 * 立即兑换
			 */
			openSkupopup(){
				this.showSkuPopup = true;
				this.params = {
					filePath: this.detailItem.thumb, 
					scoreprice: this.detailItem.scoreprice,
					stock: this.detailItem.stock,
					state:1,
					addressInfo:this.params.addressInfo?this.params.addressInfo:''
				}
			},
			
			updateaddressInfo(item){
				this.params.addressInfo = item;
				this.params.state = this.params.state+1;
			},
			
			//图片预览
			previewImage(index) {
				this.$api.previewImage(index, this.bannerList);
			},
			
			selectSkuDone(e) {
				this.$http.get(this.$config.UrlCreateOrder, {
					id: this.id,
					number:e.buyNum,
					address_id:e.addressInfo.id
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					this.$api.toast(res.msg);
					if (res.code == 1) {
						this.showSkuPopup = false;
					} 
				})
			},
			
		}    
	}
</script>

<style scoped>
	.swiper-content {
		height: 750rpx;
	}

	.swiper-content video {
		width: 750rpx;
		height: 750rpx;
	}

	.file-type-view {
		position: absolute;
		bottom: 10rpx;
		width: 100%;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.file-type-view .icon-view {
		border-radius: 20px;
		padding: 6rpx 20rpx;
		font-size: 22rpx;
		margin-right: 20rpx;
		color: #999;
		border: 1rpx solid #999;
	}

	.file-type-view .icon-view.active {
		color: #FC2D38;
		border: 1rpx solid #FC2D38;
	}

	.banner-title {
		position: absolute;
		top: 658rpx;
		right: 50rpx;
		font-size: 26rpx;
		padding: 4rpx 20rpx;
		color: #fff;
		border-radius: 20rpx;
		background: #000000;
		opacity: 0.2;
	}

	.foot-warp {
		position: fixed;
		border-top: 2rpx solid #eee;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		padding: 15rpx 30rpx 15rpx 0;
	}

	.coupon-border-left {
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

	.coupon-border-right {
		border-radius: 0rpx 20rpx 20rpx 0rpx;
	}

	.coupon-item {
		display: flex;
		width: 720rpx;
		height: 200rpx;
	}
	
</style>
